<template>
  <div class="shop-item" @click="check()">
    <div class="img">
      <img @load="change()" src="../../../public/img/shopitem.png" alt="" />
    </div>
    <div class="msg">
      <h3>{{ item.name }}</h3>
      <p class="content">{{ item.introduct }}</p>
      <p class="price">{{ item.price }}</p>
      <p class="comment">
        <span class="num">{{ item.sales }} </span>
        <span class="percent"> 96%好评</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  name: "ShopItem",
  data() {
    return {};
  },
  components: {},
  methods: {
    change() {
      this.$emit("onload");
    },
    check() {
      this.$router.push({
        path: "/detail",
        query: {
          id: this.item.id,
        },
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.shop-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 3.333333rem;
  padding: 0.266667rem;
  border: 1px solid #eee;
  .img {
    width: 30%;
    img {
      width: 100%;
    }
  }
  .msg {
    width: 70%;
    padding: 0.266667rem;
    h3 {
      font-size: 0.48rem;
    }
    .content {
      font-size: 0.426667rem;
      color: red;
    }
    .price {
      font-size: 0.426667rem;
    }
    .comment {
      font-size: 0.426667rem;
      color: #aaa;
    }
  }
}
</style>